<!-- 用初版的美容问答页面改为用户扫码的页面 -->
<template>
  <div class="flex h-screen overflow-hidden" style="background: #f9f3ed;">
    <!-- 扫码弹窗 -->
    <el-dialog :visible.sync="showScanPopup" width="700px" :show-close="false" :modal-append-to-body="false" center
      custom-class="beauty-dialog" class="unsetStyle">
      <div class="scan-popup-content bg-white rounded-lg flex items-center relative">
        <div class="login-left-bg">
          <img style="width:120px;height:60px;position:absolute;top:-20px;left:-20px;"
            src="@/assets/images/mr/100.png" alt="">
        </div>
        <div class="relative z-10 p-8 " style="">
          <h2 class="text-2xl font-semibold mb-6 text-center text-primary pb20">扫码开启美丽之旅</h2>
          <div class="w-48 h-48 mx-auto bg-white flex items-center justify-center mb-6 rounded-xl shadow-lg">
            <!-- 这里应该是实际的二维码图片 -->
            <div class="bg-gray-100 border-2 border-dashed rounded-xl w-40 h-40 flex items-center justify-center">
              <div class="text-gray-400">

                <QrCode :url="qrUrl" title="" :isDown="false" :isEdit="false" @edit="" />

              </div>
            </div>
          </div>
          <p class="text-center pt25 text-sm text-gray-600 mb-6">请使用<span class="green">【微信】</span>扫描二维码，获取个性化美容建议</p>
          <button
            class="bg-primary text-white px-6 py-3 rounded-full w-full font-medium hover:bg-opacity-90 transition-all duration-300 shadow-md">扫码立即体验</button>
        </div>
      </div>
    </el-dialog>

    <!-- 中间人物展示区 -->
    <div class="bg-bg-middle flex items-center justify-center" style="">
      <div class="carousel-container max-h-[60vh] overflow-hidden">
        <el-image class="bann" v-for="(image, index) in carouselImages" :key="index" :src="image"
          :alt="'Elegant woman ' + (index + 1)" fit="cover"
          :class="['carousel-image', 'smooth-transition', 'hover:scale-105', { 'active': currentIndex === index }]" />
      </div>
    </div>

    <!-- 左侧侧边栏 -->
    <div class=" bg-bg-sidebar p-4 flex flex-col items-center" style="">
      <div class="text-2xl font-bold text-primary mb-8">锦波 & 初媛</div>

      <div class="w-4/5 bg-white/80 rounded-2xl p-4 flex flex-col items-center mb-6 left-nav"
        style="padding:120px 20px;">
        <div class="text-4xl text-secondary mb-6">
          <img class="left-logo" src="../../assets/images/mr/logo.png" alt="">
        </div>
        <div class="text-sm text-secondary mb-8 fan" style="color:#666;">美容咨询</div>
        <div class="flex w-full justify-around mb-4">
          <div class="text-2xl text-secondary">
            <img class="left-menu-img fan" src="../../assets/images/mr/bushui.png" alt="">
          </div>
          <div class="text-2xl text-secondary" @click="showMsgData = true">
            <img class="left-menu-img fan" src="../../assets/images/mr/yaozhuang.png" alt="">
          </div>
        </div>
        <div class="flex w-full justify-around mb-8 btn">
          <button class="bg-primary/10 text-primary p-2 rounded-lg smooth-transition hover:bg-primary/20"
            @click="showExam = true">
            <img class="left-menu-img fan" src="../../assets/images/mr/xizao.png" alt="">

          </button>
          <button class="bg-primary/10 text-primary p-2 rounded-lg smooth-transition hover:bg-primary/20"
            @click="showInfoData = true">
            <img class="left-menu-img fan" src="../../assets/images/mr/xiyu.png" alt="">
          </button>
        </div>
        <div class="text-2xl text-secondary">
          <img class="left-menu-img fan" src="../../assets/images/mr/menu.png" alt="">
        </div>
      </div>

      <div class="mt-auto text-xl text-secondary">
      </div>
    </div>

    <!-- 右侧内容&对话区 -->
    <div v-if="!showExam || showScanPopup" class="bg-bg-right p-8 overflow-y-auto" style="">
      <div class="flex justify-between items-center mb-8">
        <div>
          <span class="text-sm text-secondary">皮肤问题深度解析</span>
          <span class="text-sm text-secondary ml-2"></span>
        </div>
      </div>
      <div class="mb-12">
        <h1 class="text-4xl font-bold text-primary mb-2">美容顾问</h1>
        <p class="text-sm text-secondary mb-4">最新护肤趋势？点击获取个性化建议，焕活肌肤光彩。</p>
      </div>
      <div class="flex flex-col space-y-6 mb-8">
        <!-- <wendaItem height="75vh" :isLogo="true" subtitle="我是您的美容顾问，可以向我咨询任何问题。" api="/dev-api/demo/deepseek/customerAsk"
          :isRead="false" readText="我是您的美容顾问，可以向我咨询任何问题。" inputPadd="20px 10px" themeColor="#8a5a52"
          :isNewConvo="false" /> -->
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import QrCode from "../components/QrCode.vue";

// import wendaItem from "@/view/components/wendaItem.vue";
import { listTask, getTask, delTask, addTask, updateTask } from "@/api/demo/task/task";
import { listCustomer, getCustomer, delCustomer, addCustomer, updateCustomer } from "@/api/demo/customer";
import { listTopicForTask } from "@/api/demo/topic/topic";
import { generatePreliminaryProposal } from "@/api/demo/deepseek";

export default {
  name: 'BeaurceQuestion',
  components: { QrCode },
  dicts: ['sys_user_sex'],
  ...mapGetters(["user"]),
  data() {
    return {
      // 轮播图相关数据
      carouselImages: [
        // ...Array.from({ length: 6 }, (_, i) => require(`@/assets/images/mr/bann/bann (${i+1}).png`)),
        ...Array.from({ length: 6 }, (_, i) => require(`@/assets/images/mr/bann/banner (${i + 1}).jpg`)),
      ],
      currentIndex: 0,
      carouselInterval: null,
      // 输入框文本
      inputText: '',
      // 消息列表
      msgData: {},
      // 新增扫码弹窗和exam组件控制变量
      showScanPopup: true,
      showExam: false,
      // 添加msgData弹窗控制变量
      showMsgData: false,
      showInfoData: false,
      // 添加login图片引用
      loginImage: require('@/assets/images/mr/login.jpg'),
      examData: [],
      examTitle: "",
      // 表单参数
      infoForm: {},
      taskTopicList: [],
      qrUrl: '',
    }
  },
  mounted() {
    this.getQrCode()
    this.startCarousel();
    this.getList()

  },
  beforeDestroy() {
    if (this.carouselInterval) {
      clearInterval(this.carouselInterval);
    }
  },
  methods: {
    getQrCode() {
      console.log("getQrCode!!!!!",this.$store.state.user)
      this.qrUrl = window.location.origin + '/app?deptId=' + this.$store.state.user.deptId
      console.log("qrUrl", this.qrUrl);
    },
    getList() {
      this.loading = true;
      listTask({ taskType: 1 }).then(response => {
        this.taskList = response.rows;
        if (response.rows.length < 1) {
          return
        } else {
          this.taskId = response.rows[0].id;
          this.startExam()
        }
      });
    },

    startExam() {

      listTopicForTask({
        taskId: this.taskId,
        questionStatus: 1,
      }).then(res => {
        console.log(res)
        if (res.code == 200) {
          if (res.data.length) {

            this.examData = res.data
            this.examTitle = "用户偏好测试"
            // this.$refs.popupDiv.open("bottom")
            // this.closeScanPopup()
          } else {
            // uni.showToast({
            //   icon: 'none',
            //   title: "无对应测试题"
            // })
          }
        } else {
          // uni.showToast({
          //   icon: 'none',
          //   title: "题库错误"
          // })
        }
      })

    },
    startCarousel() {
      this.carouselInterval = setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.carouselImages.length;
      }, 3000);
    },
    // 关闭扫码弹窗并显示exam组件
    closeScanPopup() {
      // console.log(this.$store.state.user.deptId)
      this.showScanPopup = false;
      this.getCustomer('exam')
      this.$message.success('扫码成功，欢迎使用~');
      // this.startExam()
    },
    getCustomer(type) {
      listCustomer({ openId: localStorage.getItem('openID') }).then(response => {
        if (response.rows.length > 0) {
          this.infoForm = response.rows[0]
          this.msgData = (response.rows[0].preliminaryProposal) ? JSON.parse(response.rows[0].preliminaryProposal) : {}
          console.log("扫码弹窗---infoForm", this.infoForm)
          // this.showInfoData = true;
          if (type == "msg") {
            this.showMsgData = true;
          }
        } else {
          if (type == "exam") {
            this.showExam = true;
          }
          this.infoForm = { openId: localStorage.getItem('openID'), deptId: this.$store.state.user.deptId, sex: '1' }
          // this.showInfoData = true;
        }
      });

    },



    handleExamClose(e) {
      console.log("handleExamClose!!!!!", e)
      this.showExam = false;
      this.taskTopicList = e.taskTopicList
      // exam弹窗关闭后打开msgData弹窗
      this.showInfoData = true;
    },
    handleInfoClose() {
      console.log("handleInfoClose!!!!!", this.infoForm)
      if (!this.infoForm.openId) {
        this.$message.error('~请重新扫码登录~')
        return
      }
      if (this.infoForm.id != null) {
        updateCustomer(this.infoForm).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.showInfoData = false;
          // this.showMsgData = true;
          this.generatePortrait()
        });
      } else {
        addCustomer(this.infoForm).then(response => {
          this.$modal.msgSuccess("填写成功");
          this.showInfoData = false;
          // this.showMsgData = true;
          this.generatePortrait()
        });
      }
      this.showMsgData = true;
    },
    generatePortrait() {
      const data = {
        openId: localStorage.getItem('openID'),
        // taskTopicList: this.taskTopicList
      }
      console.log("generatePortrait!!!!!", data)
      generatePreliminaryProposal(data).then(response => {
        this.$modal.msgSuccess("生成成功");
        if (response.code == 200) {
          this.getCustomer('msg')
        }
      });
    },
  },

}
</script>

<style>
/* 主题颜色定义 */
:root {
  --color-primary: #8a5a52;
  /* 深棕主色 */
  --color-secondary: #d4b4a4;
  /* 浅棕辅助色 */
  --color-accent: #f5e8e4;
  /* 米白强调色 */
  --color-bg-sidebar: linear-gradient(180deg, #f8e8e1 0%, #d8b6a9 100%);
  /* 侧边栏渐变 */
  --color-bg-middle: #c9a093;
  /* 中间区域背景 */
  --color-bg-right: #f9f3ed;
  /* 右侧区域背景 */
  --font-serif: 'Playfair Display', Georgia, serif;
  /* 优雅衬线字体 */
}

/* 美化弹窗样式 */
.beauty-dialog .el-dialog {
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

.beauty-dialog .el-dialog__header {
  display: none;
}
</style>
<style scoped lang="scss">
/* 引入Tailwind CSS变量和工具类 */
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }

  .smooth-transition {
    transition: all 0.3s ease-in-out;
  }
}

/* 对话气泡样式 */
.chat-bubble-left {
  background-color: white;
  border-radius: 1rem;
  border-bottom-left-radius: 0.25rem;
}

.chat-bubble-right {
  background-color: var(--color-primary);
  color: white;
  border-radius: 1rem;
  border-bottom-right-radius: 0.25rem;
}

/* 颜色类 */
.text-primary {
  color: var(--color-primary);
}

.text-secondary {
  color: var(--color-secondary);
}

.bg-bg-sidebar {
  width: 20vh;
  min-width: 180px;
  padding: 200px 0;
  background-color: var(--color-bg-middle);
  background-image:
    radial-gradient(#c9a09380 1px, transparent 1px),
    radial-gradient(#c9a09390 1px, transparent 1px);
  background-size: 30px 30px, 15px 15px;
  background-position: 0 0, 15px 15px;
  border-radius: 0 20px 20px 0;
  // box-shadow: 5px 0 10px #6b423b70;
}

.bg-bg-middle {
  width: 42vh;
  min-width: 360px;
  background-color: var(--color-bg-middle);
  background-image:
    radial-gradient(#e0e0e050 1px, transparent 1px),
    radial-gradient(#e0e0e070 1px, transparent 1px);
  background-size: 30px 30px, 15px 15px;
  background-position: 0 0, 15px 15px;

}

.bg-bg-right {
  width: calc(100% - 62vh);
  background-color: var(--color-bg-right);
  background-image:
    linear-gradient(0deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
  background-size: 20px 20px;
}

.bg-primary {
  background-color: var(--color-primary);
}

.left-nav {
  border: 2px solid #ffffff80;
  box-shadow: #BB7569 0px 4px 12px;

  background: linear-gradient(to bottom, #F1E4D3 0%, #EFBB94 25%, #BB7569 75%, #D9B1AE 100%);

}

.left-nav:hover {
  background: linear-gradient(to bottom, #F1E4D3 0%, #EFBB94 50%, #D9B1AE 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  .fan {
    filter: invert(100%)
  }
}

.left-logo {
  width: 45px;
  height: 45px;
}

.left-menu-img {
  width: 35px;
  height: 35px;
}

.left-menu-img:hover {
  filter: invert(50%);
  transform: rotate(390deg);
  transition: transform 0.5s;
}

.btn {
  border-radius: 50px;
  border: 2px solid #ffffff80;
  box-shadow: #BB7569 0px 4px 12px;
  background: linear-gradient(to bottom, #F1E4D3 0%, #EFBB94 100%);
}

// 添加轮播图样式
.carousel-container {
  position: relative;
  border-radius: 0 20px 20px 0;
  box-shadow: 5px 0 10px #6b423b70;
  width: 100%;
  // margin-top:5vh;
  // height: 95vh;
  height: 100vh;
}

.carousel-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.carousel-image.active {
  opacity: 1;
}

.bann {
  // height: 100vh;
  // width: 100%;
  width: 38vh;
  height: 70vh;
  margin: 15vh 2vh 0;
  display: block;
}

// 扫码弹窗样式
.scan-popup-content {
  position: relative;
  border-radius: 10px;
}

.login-left-bg {
  width: 260px;
  height: 500px;
  background: url('../../assets/images/mr/login.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 10px;
}

// 建议弹窗
.msg-data-content {
  max-height: 70vh;
  overflow-y: auto;
}

.msg-data-title {
  text-align: center;
  color: var(--color-primary);
  margin-bottom: 20px;
  font-size: 24px;
}

.msg-data-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.msg-data-section {
  background: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-title {
  color: var(--color-primary);
  margin-bottom: 10px;
  font-size: 18px;
  border-bottom: 1px solid var(--color-secondary);
  padding-bottom: 5px;
}

.section-list {
  list-style-type: none;
  padding: 0;
}

.list-item {
  padding: 5px 0;
  position: relative;
  padding-left: 15px;
}

.list-item:before {
  content: "•";
  color: var(--color-primary);
  position: absolute;
  left: 0;
  top: 5px;
}

.green {
  color: #22c55e;
  font-weight: bold;
}

@media (max-width: 1200px) {
  .bg-bg-middle {
    display: none;
  }

  .bg-bg-right {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .bg-bg-sidebar {
    display: none;
  }

  .el-dialog {
    width: 90% !important;
  }
}
</style>